
<template>
  <div id="active_detail">
    <ma-header titleName="活动详情" :returnNative="$route.params.native"></ma-header>
    <!--<scroll :getMore="dargUpAddData">-->
    <!--<my-header main-text="活动详情" bg-color="#F7F7F7" text-color="#000">
        <img :src="left" alt="">
      </my-header>-->
    <img class="actImg" :src="activeDetail.cover ? addPath(activeDetail.cover) : defaultImg" width="100%">
    <div class="content">
      <div class="active_title">
        <h2>{{ activeDetail.title }}</h2>
        <span v-if="activeDetail.fleet&&activeDetail.fleet.hasFollow === '0'" v-tap="{methods:createFollow,id:activeDetail.fleet&&activeDetail.fleet.id}">关注</span>
        <span v-else  v-tap="{methods:deleteFollow,id:activeDetail.fleet&&activeDetail.fleet.id}">已关注</span>
      </div>
      <div class="iconCon">
        <div class="i_class">
          <i class="iconfont icon-shijian1"></i>
        </div>
        <span class="activity_time">活动日期：{{activeDetail.beginDate | sliceDatebegOne}}/{{activeDetail.beginDate | sliceDatebegTwo}}/{{activeDetail.beginDate | sliceDatebegThree}} {{activeDetail.beginDate | sliceDatebegFour}} ~ {{ activeDetail.endDate | sliceDateendOne }}/{{ activeDetail.endDate | sliceDateendTwo }}/{{ activeDetail.endDate | sliceDateendThree }} {{ activeDetail.endDate | sliceDateendFour }}</span>
      </div>
      <div class="iconCon actDeadTime">
        <div class="i_class">
          <i class="iconfont icon-icondaishiyong"></i>
        </div>
        <span class="dataCon">报名截止日期：{{ activeDetail.deadline | sliceDateDeadOne }}/{{ activeDetail.deadline | sliceDateDeadTwo }}/{{ activeDetail.deadline | sliceDateDeadThree }} {{activeDetail.deadline | sliceDateDeadFour}}</span>
      </div>
      <div class="iconCon" v-if="activeDetail.amount">
        <div class="i_class">
          <span class="renminbi"></span>
        </div>
        <span>
         	 活动费用：¥ {{ activeDetail.amount | thousandth }}
        </span>
      </div>
      <div class="iconCon vue-map ">
        <div>

          <router-link :to='{
                    name :"Baidumap",
                    params:{
                        address: `lngBaidu=${activeDetail.lngBaidu}&latBaidu=${activeDetail.latBaidu}`
                    }
                }'>

            <div class="i_class">
              <!--<mu-icon value="room" color="#F98700" />-->
              <i class="iconfont icon-dingwei"></i>
            </div>
          </router-link>
          <router-link :to='{
                    name :"Baidumap",
                    params:{
                        address: `lngBaidu=${activeDetail.lngBaidu}&latBaidu=${activeDetail.latBaidu}`
                    }
                }'>
            <span class="dataCon">活动地址 : {{ activeDetail.address }}</span>
          </router-link>
        </div>
        <router-link :to='{
                    name :"Baidumap",
                    params:{
                        address: `lngBaidu=${activeDetail.lngBaidu}&latBaidu=${activeDetail.latBaidu}`
                    }
                }'>
          <div class="i_class">
            <i class="iconfont icon-tiaozhuan-copy"></i>
          </div>

        </router-link>
        <router-view></router-view>
      </div>
       <!--<div class="iconCon cost">
        <div class="i_class">
          <i class="iconfont icon-feiyong"></i>
        </div>
        <span class="dataCon">活动费用 : ￥0</span>
      </div>-->
      <div class="iconCon lead">
        <div class="i_class">
          <i class="iconfont icon-guanyudianpu"></i>
        </div>

        <span class="dataCon">主办方：{{activeDetail.fleet?activeDetail.fleet.name:''}}</span>
      </div>
    </div>
    <div class="join">
      <div class="attNum">
        已报名
        <span>&nbsp;{{ activeDetail.attendNumber }}&nbsp;</span>人/限额{{ activeDetail.limitNumber }}人
      </div>
      <div v-show="activeDetail.attendNumber != 0" v-tap="{methods: checkAttendDet, activeId: activeDetail.id}">
        <img class="memberHead" v-for="item in attendList" :src="item.memberHead ? addPath(item.memberHead) : defaultImg" />
        <!-- <i class="iconfont icon-tiaozhuan-copy" v-if="attendList.length > 0 "></i> -->
      </div>
    </div>
    <!--<div class="dragUpInfo" v-if="!activeInfoContent">
        向上拖动查看活动详情
        <span>
              <i class="iconfont icon-right"></i>
          </span>
      </div>-->
    <div :id="activeInfoContentBox" :class="{drag_active_info:activeInfoContent}" v-html="activeInfoContent">

    </div>
    <full-button v-if="activeDetail.hasAttend === '0' && activeDetail.attendNumber < activeDetail.limitNumber" name="立即报名" v-tap="{methods: attend, activeId: activeDetail.id}"></full-button>
    <full-button v-if="activeDetail.hasAttend === '1'" name="取消报名" v-tap="{methods: cancel, activeId: activeDetail.id}"></full-button>
    <full-button v-if="(activeDetail.attendNumber === activeDetail.limitNumber) && (isIn === 0)" name="活动满员"></full-button>
    <!--<model :isShow="isCancel" v-on:closeIsModel="cancel" title=" ">
      	确定取消报名?
    </model>-->
  </div>
</template>

<script>
import Vue from "vue";
import maHeader from "components/magicHeader";
import fullButton from "components/button/full_button";
import left from "assets/left-gray.svg";
import cells from "components/cells";
import Baidumap from "components/Baidumap";
import model from "components/model";
//vfac
import vfacDefault from "assets/default_user_icon.png";
// service
import QueryFleetActivityService from "services/community/activeDetail";
import QuitFleetActivityService from "services/community/QuitFleetActivity";

import CreateFollow from "services/community/CreateFollow";
import DeleteFollow from "services/community/DeleteFollow";

let activeId;

export default {
  data() {
    return {
      left,
      defaultImg:'',
      activeDetail: {},
      attendList: [],
      shopName: this.$route.params.shopName,
      isIn: "",
      userInfo: "",
      addActiveInfo: true,
      changActiveData: false,
      touchStartY: "",
      touchEndY: "",
      activeInfoContent: "",
      activeInfoContentBox: "activeInfoContentBox"
    };
  },
  created() {
    this.defaultImg = vfacDefault;
    let that = this;
    that.userInfo = {
      userId: this.$.userId,
      shop: {
        id: this.$.shopId
      }
    };
    QueryFleetActivityService.bind(this)(
      {
        activityId: this.$route.query.activeId
      },
      resp => {
        // 判断用户是否报名该活动的字段
        this.activeDetail = resp.fleetActivityData;
        console.log(this.activeDetail.fleet)
        // 只截取6个报名该活动的人员头像显示
        this.attendList = resp.fleetActivityAttendDatas.splice(0, 6);
        this.dargUpAddData();
      }
    );
  },

  // 过滤时间
  filters: {
    // 活动开始日期
    sliceDatebegOne: function(value) {
      if (!value) return "";
      return value.substring(0, 4);
    },
    sliceDatebegTwo: function(value) {
      if (!value) return "";
      return value.substring(5, 7);
    },
    sliceDatebegThree: function(value) {
      if (!value) return "";
      return value.substring(8, 10);
    },
    sliceDatebegFour: function(value) {
      if (!value) return "";
      return value.substring(11, 16);
    },
    // 活动结束日期
    sliceDateendOne: function(value) {
      if (!value) return "";
      return value.substring(0, 4);
    },
    sliceDateendTwo: function(value) {
      if (!value) return "";
      return value.substring(5, 7);
    },
    sliceDateendThree: function(value) {
      if (!value) return "";
      return value.substring(8, 10);
    },
    sliceDateendFour: function(value) {
      if (!value) return "";
      return value.substring(11, 16);
    },
    // 报名截止日期
    sliceDateDeadOne: function(value) {
      if (!value) return "";
      return value.substring(0, 4);
    },
    sliceDateDeadTwo: function(value) {
      if (!value) return "";
      return value.substring(5, 7);
    },
    sliceDateDeadThree: function(value) {
      if (!value) return "";
      return value.substring(8, 10);
    },
    sliceDateDeadFour: function(value) {
      if (!value) return "";
      return value.substring(11, 16);
    },
    thousandth: num => {
      // 千分符过滤器
      return (parseInt(num).toFixed(2) + "").replace(
        /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
        "$&,"
      );
    }
  },

  methods: {
    createFollow(params){
      if(this.$.userId){
        CreateFollow.bind(this)(
          {
            type: 'fleet',
            refId: params.id
          },
          res => {
            this.activeDetail.fleet.hasFollow = "1";
          }
        );
      }else{
        this.$.goLogin({
            name: "login"
          });
      }
      
     
    },
    deleteFollow(params){
      if(this.$.userId){
        DeleteFollow.bind(this)(
          {
            type: 'fleet',
            refId: params.id
          },
          res => {
            this.activeDetail.fleet.hasFollow = "0";
          }
        );
      }else{
        this.$.goLogin({
            name: "login"
          });
      }
      
    },
    // 查看报名详情
    checkAttendDet(params) {
      this.$router.push({
        name: "active_attendDetail",
        params: {
          activeId: params.activeId
        }
      });
    },
    // 报名活动
    attend(params) {
      let startDate = new Date(
        Date.parse(this.activeDetail.beginDate&&this.activeDetail.beginDate.replace(/-/g, "/"))
      );
      let endDate = new Date(
        Date.parse(this.activeDetail.endDate&&this.activeDetail.endDate.replace(/-/g, "/"))
      );
      let attendDate = new Date(
        Date.parse(this.activeDetail.deadline&&this.activeDetail.deadline.replace(/-/g, "/"))
      );
      console.log(new Date());
      // if(attendDate < startDate){
      //   this.$.toast("还没到车友会活动报名时间");
      //   return
      // }
      if(attendDate < new Date()){
        this.$.toast("车友会活动已过报名截止时间");
        return
      }
      // if(attendDate < new Date()){
      //   this.$.toast("车友会活动已经开始了");
      //   return
      // }
      this.$router.push({
        name: "activity_attend_detail",
        params: {
          activeId: params.activeId
        }
      });
    },
    //取消活动
    cancelActive(params) {
      var that = this;
      QuitFleetActivityService.bind(that)(
        {
          activityId: params.activeId
        },
        res => {
          this.isIn = 0;
          QueryFleetActivityService.bind(that)(
            {
              clientType: that.$.getClientType,
              shopId: that.userInfo.shop.id,
              userId: that.userInfo.userId,
              activityId: that.activeDetail.id
            },
            resp => {
              this.$.toast('取消报名成功!')
              that.activeDetail = resp.fleetActivityData;
              that.attendList = resp.fleetActivityAttendDatas.splice(0, 6);
            }
          );
        }
      );
    },
    cancel(params) {
      this.$.confirm(
        {
          msg: "确定取消报名?"
        },
        () => {
          this.cancelActive(params);
        }
      );
    },
    //    touchStart(e){
    //      this.touchStartY = parseInt(e.targetTouches[0].pageY);
    //    },
    //    touchEnd(e){
    //      //回滚的容器高度
    //      var h = document.querySelector("#active_detail").scrollHeight;
    //      this.touchEndY = parseInt(e.changedTouches[0].pageY);
    //      this.touchStartY - this.touchEndY > 7 && this.addActiveInfo ? this.dargUpAddData(h) : console.log('已经加载数据')
    //    },
    dargUpAddData(h) {
      if (!this.changActiveData) {
        //判断用户是否已经加载过数据
        QueryFleetActivityService.bind(this)(
          {
            clientType: this.$.getClientType,
            shopId: this.userInfo.shop.id,
            userId: this.userInfo.userId,
            activityId: this.activeDetail.id
          },
          res => {
            console.log(res);
            this.activeInfoContent = res.fleetActivityData.content;
            this.changActiveData = true; //已经加载的数据，关闭再次加载
            this.attendList = res.fleetActivityAttendDatas.splice(0, 6);
          }
        );
      }
    }
  },
  //  beforeRouteEnter(to, from, next) {
  //
  //  },
  components: {
    maHeader,
    cells,
    fullButton,
    Baidumap,
    model,
    scroll
  }
};
</script>

<style>
body {
}

#active_detail {
  height: 100vh;
}
/*#active_detail.actIos{padding-bottom:86px}*/
/*#active_detail .content,*/
#active_detail .join {
  background-color: #fff;
  padding: 0 10px;
  color: #a0a0a0;
}

#active_detail .content .iconCon {
  display: flex;
  justify-content: flex-start;
  padding: 8px;
  font-size: 15px;
}
#active_detail .content .iconCon a,i{
  color:#202020;
}
#active_detail .content .actDeadTime,
#active_detail .content .lead {
  padding-top: 13px;
  padding-bottom: 13px;
}
#active_detail .actImg {
  object-fit: cover;
}
#active_detail .content .active_title{
  display: flex;
  justify-content:space-between;
}
#active_detail .content .active_title span{
  line-height: 38px;
  padding-right: 5%;
  color: #f98700;
}
#active_detail .content h2 {
  padding: 10px;
  border-bottom: 1px solid #f7f7f9;
  color: #1a1a1a;
}

#active_detail .content .mu-icon {
  margin-left: -4px;
}

#active_detail .content .iconfont {
  color: #f98700;
}

#active_detail .content .iconfont.icon-shijian1 {
  font-size: 20px;
  margin-left: -2px;
}

#active_detail .content .iconfont.icon-feiyong {
  font-size: 17px;
  margin-left: -1px;
}

#active_detail .content .iconfont.icon-dingwei{
	font-size: 20px;
}
#active_detail .content .iconfont.icon-guanyudianpu {
  font-size: 20px;
  margin-left: -1px;
}

#active_detail .content .iconfont.icon-icondaishiyong {
  font-size: 20px;
}

#active_detail .join .attNum {
  padding: 12px 0;
  margin-left: 10px;
  border-bottom: 1px solid #f7f7f9;
}

#active_detail .join .attNum > span {
  font-size: 18px;
  color: #f98700;
}

#active_detail .join .memberHead {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-top: 5px;
}

#active_detail .join .icon-right {
  font-size: 24px;
  position: relative;
  top: -16px;
  right: -10px;
}

#active_detail .more {
  text-align: center;
  color: #a0a0a0;
  font-size: 16px;
  margin-top: 13px;
}

#active_detail .mu-raised-button {
  position: fixed;
  bottom: 49px;
  background-color: #827d77;
  color: #fff;
}

#active_detail .mu-raised-button.fullAndroid {
  bottom: 0px;
}

#active_detail .activity_time {
  display: inline-block;
  width: 90%;
  line-height: 21px;
}

#active_detail .i_class {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dragUpInfo {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  color: #a0a0a0;
  font-size: 1rem;
  border-bottom: 1px solid #f7f7f9;
}

.dragUpInfo span {
  margin-top: -1px;
  margin-left: 5px;
  display: block;
  transform: rotateZ(-90deg);
}

.drag_active_info {
  display: flex;
  flex-flow: column;
  padding: 5px 10px 20px;
  line-height: 18px;
  font-size: 14px;
}

.drag_active_info p {
}
.drag_active_info img {
  width: calc(100% - 20px);
  object-fit: contain;
}

.vue-map {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vue-map div {
  display: flex;
  justify-content: center;
}

.vue-map div a {
  color: #a0a0a0;
}

.vue-map div span {
  line-height: 150%;
}

.icon-tiaozhuan-copy {
  color:#202020!important;
}

.renminbi {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  float: left;
  background: url("../../assets/yuan.png") no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
}

.active-d-repaired-h.androidclass {
  bottom: 0;
}

.active-d-repaired-h-item {
  position: static !important;
  justify-content: center;
  align-items: center;
}
.icon-tiaozhuan-copy{
	font-size:20px;
}
</style>